<template>
  <div class="today-container">
    <el-drawer size="35%" :modal="false" :visible.sync="drawer" :direction="direction" :withHeader="false"
      @closed="handleClose">
      <div class="today-box">
        <div class="header">
          <span class="iconfont icon-rili"></span>
          <div class="title">
            <h2>每日歌曲推荐</h2>
            <span>根据你的音乐口味生成，每天6:00更新</span>
          </div>
        </div>

        <div class="btns">
          <div class="playall">
            <i class="el-icon-caret-right"></i>
            <span @click="playThisAll">播放全部</span>
            <i class="el-icon-plus"></i>
          </div>
          <div class="star">
            <i class="el-icon-folder-checked" v-if="false"></i>
            <i class="el-icon-folder-add" v-else></i>
            <span v-if="false">收藏全部</span>
            <span v-else> 收藏全部</span>
          </div>
        </div>

        <div class="songs-list">
          <el-table style="width: 100%" stripe highlight-current-row :lazy="true" size="mini" :data="songsList"
            @row-dblclick="getSongInfo">
            <el-table-column type="index" width="40" align="center"></el-table-column>
            <el-table-column prop="prop" label="操作" width="50">
              <template slot-scope="{row}">
                <div class="control">
                  <span class="iconfont icon-xihuan" @click="addmyLove(row)"></span>
                  <span class="iconfont icon-xiazai" @click="download(row)"></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="标题" width="width" show-overflow-tooltip>
              <template slot-scope="{row}">
                <div class="title-tags">
                  <span class="song-title">{{ row.name }}<i v-if="row.alia.length > 0">({{ row.alia[0] }})</i></span>
                  <div class="tags">
                    <el-tag v-if="row.fee == 1" effect="plain" size="mini" class="vip-tag">VIP</el-tag>
                    <el-tag v-if="row.sq" effect="plain" size="mini" class="sq-tag">SQ</el-tag>
                    <el-tag v-if="row.mv" effect="plain" size="mini" class="sq-tag"
                      @click="$router.push('/mv/' + row.mv)">MV<i class="el-icon-caret-right"></i></el-tag>
                    <i v-if="row.pc" class="el-icon-cloudy"></i>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="歌手" width="100" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span class="arname" @click="$router.push('/artists/' + row.ar[0].id)">{{ row.ar[0].name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="专辑" width="150" show-overflow-tooltip>
              <template slot-scope="{row}">
                <span @click="$router.push('/albums/' + row.al.id)" class="song-title">{{ row.al.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="dt" label="时间" width="80" align="center"></el-table-column>
          </el-table>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import axios from '@/request/request'
export default {
  data() {
    return {
      direction: 'ltr',
      drawer: false,
      songsList: [],
    }
  },
  created() {
    this.getToDaySongsList()
  },
  mounted() {
    this.drawer = true
  },
  methods: {
    // 播放当前歌单所有歌曲
    playThisAll() {
      this.$store.commit('audio/updateNowPlayList', this.songsList)
      this.$store.dispatch('audio/getSongUrl', this.songsList[0])
    },
    // 获取今日推荐歌曲
    async getToDaySongsList() {
      const { data: res } = await axios.get('/recommend/songs')
      if (res.code == 200) {
        res.data.dailySongs.forEach(item => {
          item.dt = this.format(item.dt)
        })
        this.songsList = res.data.dailySongs
      }
    },
    // 处理歌曲时间函数
    format(dt) {
      let m = parseInt(dt / 1000 / 60)
      let s = ((dt / 1000) % 60).toFixed(0)
      if (m < 10) {
        m = '0' + m
      }
      if (s < 10) {
        s = '0' + s
      }
      return m + ':' + s
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data(this))
      this.$router.push('/home')
    },
    // 收藏歌单
    async collection() {
      if (this.songDetail.subscribed) {
        this.t = 2
      } else {
        this.t = 1
      }
      const { data: res } = await axios.post(`/playlist/subscribe?t=${this.t}&id=${this.songsInfo.id}`)
      if (res.code == 200) {
        if (this.t == 1) {
          this.$message.success('收藏成功')
        } else {
          this.$message.success('取消收藏成功')
        }
        this.getSongsDetail(this.songsInfo.id)
      }
    },
    // 添加到我的喜欢音乐
    async addmyLove(row) {
      const { data: res } = await axios({
        method: 'post',
        url: `/like?id=${row.id}`
      })
      if (res.code == 200) {
        this.$message.success('喜欢成功')
      }
    },
    // 点击获取下载链接
    async download(row) {
      const { data: res } = await axios.get(`/song/download/url?id=${row.id}`)
      if (res.code == 200) {
        this.$download(res)
      }
    },
    // 双击行事件
    getSongInfo(row) {
      this.$store.dispatch('audio/getSongUrl', row)
      this.$store.commit('audio/updateNowPlayList', this.songsList)
    }
  }
}
</script>

<style lang="less" scoped>
.today-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 500;
  cursor: default;

  /deep/ .el-drawer {
    height: 91% !important;
    box-shadow: none;
  }

  .today-box {
    padding: 13% 0 0;

    .header {
      display: flex;
      align-items: center;

      .icon-rili {
        font-size: 100px;
        color: rgb(116, 62, 191);
        font-weight: 300;
      }

      .title {
        margin-left: 25px;
        text-align: start;

        h2 {
          margin: 0;
          margin-bottom: 5px;
        }

        span {
          font-size: 12px;
          color: rgb(93, 93, 93);
        }
      }
    }

    .btns {
      display: flex;
      justify-content: space-between;
      width: 280px;
      margin-top: 10px;
      margin-left: 7px;
      cursor: default;

      .playall {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 150px;
        height: 34px;
        color: #fff;
        font-size: 14px;
        border-radius: 17px;
        background-color: #962ed6;

        .el-icon-caret-right {
          font-size: 20px;
          font-weight: 700;
        }

        .el-icon-plus {
          font-size: 18px;
        }
      }

      .star {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        width: 80px;
        height: 32px;
        border: 1px solid rgb(192, 192, 192);
        padding: 0 15px;
        border-radius: 17px;
        font-size: 14px;

        .el-icon-folder-checked {
          font-size: 20px;
          margin-right: 3px;
          transform: translateY(1px);
        }

        .el-icon-folder-add {
          font-size: 20px;
          margin-right: 3px;
          transform: translateY(1px);
        }
      }
    }

    // 歌曲信息列表
    .songs-list {
      width: 100%;
      margin: 10px auto;
      border-top: 1px solid rgb(222, 222, 222);

      .control {

        // display: flex;
        // align-items: center;
        .icon-xiazai {
          font-size: 20px;
          margin-left: 5px;

          &:hover {
            font-weight: 700;
          }
        }

        .icon-xihuan {
          &:hover {
            font-weight: 700;
          }
        }
      }

      .title-tags {
        display: flex;

        .tags {
          display: flex;
          align-items: center;

          .vip-tag {
            color: #d83b55;
            border: 1px solid #d83b55;
            margin-left: 3px;
          }

          .sq-tag {
            color: #962ed6;
            border: 1px solid #962ed6;
            margin-left: 3px;
          }

          /deep/ .el-icon-cloudy {
            font-size: 20px;
            // transform: translateY(4px);
            margin-left: 3px;
          }

          /deep/ .el-tag--mini {
            height: 16px;
            line-height: 16px;
            padding: 0 2px;
          }
        }
      }

      .arname {
        display: block;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .song-title {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        i {
          color: #9e9d9d;
          font-style: normal;
        }
      }

      /deep/ .el-tabs__item:hover {
        color: #962ed6;
      }

      /deep/ .el-tabs__item.is-active {
        color: #962ed6;
        font-size: 20px;
        font-weight: 700;
      }

      /deep/ .el-tabs__active-bar {
        background-color: #962ed6;
        height: 4px;
      }

      /deep/ .el-tabs__nav-wrap::after {
        height: 0;
      }
    }
  }
}
</style>